<template>
    <div class="audit-page">
      <Button @click="openModal" type="primary" :size="smallBtn ? 'small' : 'default'" :ghost="id ? false : true">{{smallBtn ? '查看' : '裁判审核日志'}}</Button>
      <Modal v-model="show" title="裁判审核日志" :width="1000" footer-hide>
        <div class="search-wrapper flex-end">
            <DatePicker
              format="yyyy-MM-dd HH:mm"
              type="datetimerange"
              v-model="query.time"
              :editable="false"
              @on-change="changeTime"
              placement="bottom-end"
              placeholder="选择操作起止时间"
              clearable
              style="width: 280px;margin-left: 8px;"
              class="noConfirm"
            ></DatePicker>
            <!-- <Select filterable
              transfer
              v-model="query.status"
              placeholder="请选择申报状态"
              filterable
              clearable
              @on-change="changePage(1)"
            >
              <Option :value="0">未审核</Option>
              <Option :value="1">已通过</Option>
              <Option :value="2">未通过</Option>
              <Option :value="3">已驳回</Option>
              <Option :value="5">驳回再修改</Option>
            </Select> -->
            <Select filterable
              v-if="!id"
              v-model="query.company"
              filterable
              clearable
              transfer
              placeholder="请选择单位"
              @on-change="changePage(1)"
            >
              <Option v-for="item in companyList" :value="item" :key="item" :title="item">{{
                item
              }}</Option>
            </Select>
            <Select filterable
              v-if="!id"
              v-model="query.groupName"
              filterable
              clearable
              transfer
              placeholder="请选择团队"
              @on-change="changePage(1)"
            >
              <Option v-for="item in groupList" :value="item.name" :key="item.id" :title="item.name">{{
                item.name
              }}</Option>
            </Select>
            <Input
              v-if="!id"
              v-model.trim="query.userName"
              placeholder="裁判名称"
              clearable
              style="width:150px; margin-left: 8px"
              @on-change="debounceSearch"
            ></Input>
            <!-- <Input
              v-if="!id"
              v-model.trim="query.reportName"
              placeholder="报告名称"
              clearable
              style="width:150px; margin-left: 8px"
              @on-change="debounceSearch"
            ></Input> -->
            <Button @click="refresh"><i class="el-icon-refresh-right"/></Button>
          </div>
          <div ref="table-wrapper">
            <TableList 
              :columns="columns" 
              :data="dataList" 
              :loading="loading"
              :total="total"
              :size.sync="query.pageSize"
              :page.sync="query.pageIndex"
              @queryFun="queryAuditLogList"
            >
            </TableList>
            <!-- <Table border :columns="columns" :data="dataList"></Table> -->
          </div>
          <!-- <div class="page-wrapper" v-if="total > 0">
            <Page
              :total="total"
              :page-size="query.pageSize"
              :current="query.pageIndex"
              @on-change="changePage"
              show-total
              show-elevator
            />
          </div> -->
      </Modal>
    </div>
  </template>
  <script>
  import $ from 'jquery';
  import { getRefereeAuditlog } from '@/api/referee';
  import { getaccessgrouplist } from '@/api/access_new';
  import { getDeclareCompanyList } from '@/api/drill_compete';
  import TableTooltip from '@/view/drill_compete/page/tableTooltip.vue'
  import { debounce } from '@/libs/utils'
  import LevelMixin from '@/mixin/levelMixin';
  export default {
    name: 'AuditLog',
    components: { TableTooltip },
    props: ['sceneId', 'projectId','companyList','groupList','id','smallBtn','ruleList'],
    mixins:[LevelMixin],
    data() {
      let _this = this;
      return {
        show:false,
        loading:false,
        query: {
          pageIndex: 1,
          pageSize: 12,
          testId:this.sceneId,
          time:[]
        },
        companyListC:[],
        groupListC:[],
        dataList: [],
        total: 0,
        checkStatusObj: {
          1: {
            label: '未审核',
            value: '0',
            color:'primary'
          },
          2: {
            label: '已通过',
            value: '1',
            color:'success'
          },
          3: {
            label: '已驳回',
            value: '2',
            color:'error'
          },
          4:{
            label: '已挂起',
            value: '4',
            color:'default'
          },
          5: {
            label: '驳回再修改',
            value: '5',
            color:'primary'
          }
        },
        columns: [
            {
            title: '裁判名称',
            key: 'userName',
            align: 'center',
            width: 100,
            tooltip: true
          },
          {
            title: '报告名称',
            key: 'reportName',
            fixed: 'left',
            width: 400,
            tooltip: true,
            // placement: 'top-left',
          },
          {
            title: '报告类型',
            key: 'type',
            placement: 'top-right',
            width: 60,
            show:() => {
              return !_this.id
            },
            render: (h, params) => {
              return h('span', params.row.type === 2 ? '防御报告' : '攻击报告');
            }
          },
          {
            title:'分值',
            key: 'score',
            placement: 'top-right',
            width: 40,
          },
          {
            title: '团队名称',
            key: 'groupName',
            width: 100,
            show:() => {
              return !_this.id
            },
            tooltip: true
          },
          {
            title: '危险等级',
            key: 'level',
            width: 100,
            tooltip: true,
            render: (h, params) => {
              let obj = this.mixinPaserLevel(params.row.level);
              return h(
                'span',
                {
                  style: {
                    color: obj.color
                  }
                },
                obj.text
              );
            }
          },
          {
            title: '危害程度',
            key: 'attackLevelName',
            align: 'center',
            width: 150,
            tooltip: true
          },
          {
            title: '目标类别',
            key: 'category',
            align: 'center',
            width: 150,
            tooltip: true,
            render: (h, params) => {
              return h(
                'span',
                params.row.category === '1' ? '一类' : params.row.category === '2' ? '二类' : '三类'
              );
            }
          },
          {
            title: '单位',
            key: 'company',
            width: 100,
            show:() => {
              return !_this.id
            },
            tooltip: true
          },
          // {
          //   title: '攻击类型',
          //   key: 'attackTypeName',
          //   width: 100,
          //   tooltip: true,
          //   show:(row) => {
          //     return row.type === 1
          //   },
          // },
          // {
          //   title: '防守类型',
          //   key: 'defenseTypeName',
          //   width: 100,
          //   tooltip: true,
          //   show:(row) => {
          //     return row.type === 2
          //   },
          // },
          {
            title: '状态',
            key: 'status',
            width: 80,
            tooltip: true,
            render: (h, { row: { status } }) => {
              return h('Tag', { 
                props:{
                  color:this.checkStatusObj[status].color}
                }, 
                this.checkStatusObj[status].label);
            },
            placement: 'top-right'
          },
          {
            title: '操作时间',
            key: 'createTime',
            width: 180,
            tooltip: true
          },
          {
            title: '审核意见',
            key: 'approvalInfo',
            width: 200,
            tooltip: true
          }
        ]
      }
    },
    computed: {
      checkStatusArr() {
        return Object.values(this.checkStatusObj);
      },
      hasSetCompanyList(){
        return Object.keys(this.$options.propsData).includes('companyList')
      },
      hasSetGroupList(){
        return Object.keys(this.$options.propsData).includes('groupList')
      },
      showCompanyList(){
        return this.hasSetCompanyList ? this.companyList : this.companyListC
      },
      showGroupList(){
        return this.hasSetGroupList ? this.groupList : this.groupListC
      }
    },
    mounted() {
      this._query = { ...this.query };
    //   this.getAuditLogList();
    },
    methods: {
      openModal(){
        this.show = true;
        if(!this.hasSetGroupList){
          this.getAccessGrouplist();
        }
        if(!this.hasSetCompanyList){
          this.getDeclareCompanyList();
        }
        this.refresh();
      },
      queryAuditLogList() {
        this.loading = true;
        // this.query.pageSize = this.calcPageSize();
        let {time,...query} = {...this.query};
        if(time.length === 2 && time[0]){
          query.startTime = time[0]+":00";
          query.endTime = time[1]+":00";
        }
        query.reportId = this.id;
        getRefereeAuditlog(query)
          .then(({data:{ code, data, messge }}) => {
            if (code === 1) {
              let list= data.items;
              this.dataList = list.map((item) => {
                let type = item.type === 1 ? 'attackType' : 'defenseType';
                let currentRule = this.ruleList.find((rule) => rule.id === item[type]);
                item.attackTypeName = item.attackType && currentRule ? currentRule.category : '';
                item.attackLevelName = item.attackLevel;
                item.defenseTypeName = item.defenseType && currentRule ? currentRule.category : '';
                return item;
              });
              this.total = data.total;
            } else {
              this.$Message.error(message);
              this.dataList = [];
              this.total = 0;
            }
          })
          .catch((error) => {}).finally(() => {
            this.loading = false;
          });
      },
      calcPageSize() {
        return Math.floor((window.innerHeight - 40 - 64) / 37);
      },
      debounceSearch:debounce(function(){
        this.changePage(1)
      },500),
      changePage(page) {
        this.query.pageIndex = page;
        this.queryAuditLogList();
      },
      changeTime(time, type) {
        this.query.time = time;
        this.changePage(1)
      },
      refresh() {
        this.query = { ...this._query, pageSize: this.query.pageSize };
        this.changePage(1);
      },
      getAccessGrouplist() {
        let params = {
          pageIndex: 1,
          pageSize: 2147483646,
          testId: this.sceneId
        };
        getaccessgrouplist(params)
          .then(({ code, data, message }) => {
            if (code === 1) {
              let list = data.items;
              this.groupListC = list.filter((item) => item.creatorName !== '内部服务用户') || [];
            } else {
              this.$Message.error(message);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      getDeclareCompanyList() {
        getDeclareCompanyList(this.projectId)
          .then(({ code, data, message }) => {
            if (code === 1) {
              this.companyListC = data;
            } else {
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    }
  };
  </script>
  <style scoped>
  .search-wrapper {
    margin: 0 0 15px 0;
    display: flex;
    justify-content: flex-end;
  }
  /deep/ .search-wrapper > *:not(:nth-child(1)) {
    margin-left: 10px;
  }
  /deep/ .search-wrapper .ivu-select {
    width: 150px;
  }
  .declare-drawer /deep/ .ivu-drawer-body {
    overflow: visible;
  }
  .flex-auto {
    flex: auto;
  }
  .page-wrapper {
    display: flex;
    justify-content: center;
    margin: 15px 0;
  }
  .noConfirm /deep/ .ivu-picker-confirm button:last-child{
    display: none;
  }
  </style>
  <style>
  .html-content {
    word-break: break-all;
  }
  .html-content img {
    max-width: 100%;
    cursor: pointer;
  }
  .html-content pre {
    white-space: normal;
  }
  </style>
  